<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Trade Confirmation</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h2 {
            color: #007bff;
            text-align: center;
        }
        .details {
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 4px;
        }
        .details table {
            width: 100%;
            border-collapse: collapse;
        }
        .details table td, .details table th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .details table th {
            width: 30%; /* 设置 th 的宽度为 td 宽度的 30% */
        }

        .details table td {
            width: 70%; /* 设置 td 的宽度为 th 宽度的 70% */
        }
        .footer {
            margin-top: 20px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
<div class="container">
    Dear <p id="realName"></p>
    <p>We are pleased to inform you that your trade has been successfully executed. Below are the details of your transaction:</p>
    <div class="details">
        <h3>Trade Details:</h3>
        <table>
            <tr>
                <th>Trade Date:</th>
                <td id="orderTime">[Trade Date]</td>
            </tr>
            <tr>
                <th>Stock Symbol:</th>
                <td id="stockCode">[Stock Symbol]</td>
            </tr>
            <tr>
                <th>Stock Name:</th>
                <td id="stockName">[Stock Name]</td>
            </tr>
            <tr>
                <th>Action:</th>
                <td id="stockType">[Action]</td>
            </tr>
            <tr>
                <th>Quantity:</th>
                <td id="orderNum">[Quantity] Shares</td>
            </tr>
            <tr>
                <th>Price per Share:</th>
                <td id="orderPrice">$[Price per Share]</td>
            </tr>
            <tr>
                <th>Total Amount:</th>
                <td id="orderTotalPrice">$[Total Amount]</td>
            </tr>
        </table>
    </div>

    <div class="details">
        <h3>Brokerage Details:</h3>
        <table>
            <tr>
                <th>Broker Name:</th>
                <td>Jane Street</td>
            </tr>
            <tr>
                <th>Commission:</th>
                <td id="commission">$[Commission]</td>
            </tr>
            <tr>
                <th>Net Amount:</th>
                <td id="netAmount">$[Net Amount]</td>
            </tr>
        </table>
    </div>

    <div class="details">
        <h3>Account Details:</h3>
        <table>
            <tr>
                <th>Account Number:</th>
                <td id="userId">12345678</td>
            </tr>
            <tr>
                <th>Account Type:</th>
                <td>Individual</td>
            </tr>
        </table>
    </div>

    <div class="details">
        <h3>Additional Information:</h3>
        <table>
            <tr>
                <th>Order Type:</th>
                <td>Market</td>
            </tr>
            <tr>
                <th>Trade Time:</th>
                <td id="order24Hours">[Trade Time]</td>
            </tr>
            <tr>
                <th>Exchange:</th>
                <td id="stockGid">[Exchange]</td>
            </tr>
        </table>
    </div>

    <p>Thank you for choosing Jane Street for your trading needs. If you have any questions or need further assistance, please do not hesitate to contact our customer service team.</p>

<!--    <div class="footer">-->
<!--        <p>Customer Service Contact:</p>-->
<!--        <p>Email: <a href="mailto:support@xyzbrokerage.com">support@xyzbrokerage.com</a></p>-->
<!--        <p>Website: <a href="http://www.xyzbrokerage.com">www.xyzbrokerage.com</a></p>-->
<!--    </div>-->
</div>
</body>
</html>
